<template>
  <div class="common-wrap">
    <div class="htmlPreview">
      <div style="display: flex; justify-content: center;height: 100%;padding: 20px 0;">
        <iframe class="iframe" :srcdoc="content"></iframe>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onActivated } from "vue";
import * as api from "@/api/index.js";
const props = defineProps({
  htmlContent: {
    type: String,
    default: "",
  },
});
const content = ref("");
onActivated(() => {
  api.default.user.htmlPreview({
    htmlFile: props.htmlContent,
  }).then(res => {
    console.log("content", res);
    content.value = res.data.htmlData;
  })
});
</script>

<style scoped lang="scss">
.iframe {
  width: 800px;
  border: #333;
  background: #fff;
}
.htmlPreview {
  background: #333;
  height: 100%;
}
</style>